<template>
  <div>
    <el-container>
      <el-header>
        <el-button class="go-back" icon="el-icon-back" @click="goBack">返回首页</el-button>

        <h3>康久集团数据监控</h3>
        <!--标题-->
        <div class="screen-title">
          <p>{{ currentTime }}</p>
        </div>
      </el-header>

      <el-main>
        <el-row>
          <el-col :span="24">
            <div class="box-card bottom">
              <div id="days-chart"></div>
            </div>
          </el-col>
          <!-- <el-col :span="8">
            <div class="box-card bottom">
              <div id="departments"></div>
            </div>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="box-card">
              <div id="pay"></div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="box-card">
              <section class="box-header">
                <h2>机构月收入</h2>
                <el-select v-model="companyName" @change="companyNameChange" filterable placeholder="请选择">
                  <el-option v-for="(item, index) in orgList" :key="index" :label="item.name" :value="item.name">
                  </el-option>
                </el-select>
              </section>

              <el-empty v-if="isNo" description="暂无数据"></el-empty>
              <div v-else id="tk-income"></div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="box-card">
              <div id="current-m-income">
                <h2>各机构8月收入</h2>
                <ul>
                  <li v-for="(item, index) in companyList" :key="index">
                    <div class="company-name">{{ item.name }}</div>
                    <div class="company-income">
                      <countTo :startVal="0" :endVal="item.sum" separator="," :duration="1000">
                      </countTo>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import FFRCJSON from "@/assets/JSON/ffrc.json";
import KSJSON from "@/assets/JSON/ks.json";

import * as echarts from "echarts/core";
import countTo from "vue-count-to";
import "echarts-liquidfill";
import {
  DatasetComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import {
  MapChart,
  BarChart,
  PieChart,
  EffectScatterChart,
  LineChart,
} from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import { UniversalTransition } from "echarts/features";
import orgJson from "@/assets/JSON/org.json";
import incomeBy8Json from "@/assets/JSON/8-income.json";
import dayIncomeJson from '@/assets/JSON/day-income.json'
import base from "@/assets/JS/base";

echarts.use([
  LineChart,
  DatasetComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  GridComponent,
  BarChart,
  LegendComponent,
  CanvasRenderer,
  LabelLayout,
  PieChart,
  EffectScatterChart,
  GeoComponent,
  UniversalTransition,
]);
export default {
  name: "dataView",
  data() {
    return {
      isNo: false,
      companyName: "",
      dialogVisible: false,
      currentTime: this.$base.timeSwitch(new Date(), true),
      companyList: incomeBy8Json.list,
      orgList: orgJson.list,
      sumIncomeShow: false,
      incomeTitle: [
        {
          text: '月收入',
          triggerEvent: true,
          textStyle: {
            color: "#fff",
            fontSize: 16,
          }
        }
      ]
    };
  },
  methods: {
    companyNameChange() {
      this.getOrgIncome();
      //this.tkMIncome(this.TKxData, this.TKData);
    },
    //获取机构月收入
    async getOrgIncome() {
      console.log(this.companyName)
      let res = await this.$base.getAjax(
        "/datadisplay/display/getOrgMonthIncome",
        {
          org: this.companyName,
        }
      );
      console.log(res)
      if (res.data.code == 200) {
        if (res.data.data && res.data.data.length > 0) {
          this.isNo = false;
          let data = res.data.data;

          this.TKxData = data.map((e) => {
            return e.month;
          });
          this.TKData = data.map((e) => {
            return e.sum;
          });

          if (this.TKData && this.TKData.length > 0) {
            this.$nextTick(() => {
              this.tkMIncome(this.TKxData, this.TKData);
            });
          } else {
            this.isNo = true;
          }
        } else {
          this.isNo = true;
        }
      } else {
        this.isNo = true;
      }
    },
    //跳转
    jumpPage(url) {
      window.open(url);
    },
    //大业务月收入
    daysIncome() {
      var chartDom = document.getElementById("days-chart");
      var myChart = echarts.init(chartDom);
      var option;

      option = {

        title: this.incomeTitle,
        color: ['#5470c6', '#91cc75', '#fac858', '#ffffff'],
        tooltip: {
          trigger: "axis",
          // axisPointer: {
          //   type: "cross",
          //   label: {
          //     backgroundColor: "#6a7985",
          //   },
          // },
        },
        legend: {
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          data: dayIncomeJson.map(e => {
            return e.name
          })
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // boundaryGap: false,
            axisLabel: {
              color: "#fff",
              // interval: 25,
              // formatter: function (e, index) {
              //   return e.split('-')[0] + '-' + e.split('-')[1].split('.')[0];
              // }
            },
            axisPointer: {
              type: 'shadow'
            },
            data: dayIncomeJson[3].data.map(e => {
              return e.name;
            }),
          },
        ],
        yAxis: [
          {
            show: true,
            type: 'value',
            axisLabel: {
              color: "#fff",
            },
            splitLine: {
              show: true,
              lineStyle: {
                width:0.5,
                // 使用深浅的间隔色
                color: ['#666']
              }
            }
          },
          {
            show: true,
            type: 'value',
            min: 0,
            max: 40000000,
            interval: 5700000,
            axisLabel: {
              color: "#fff",
            }
          },
        ],
        series: dayIncomeJson
      };
      //点击
      myChart.on("click", (e) => {

        if (e.componentType === 'title') {
          this.sumIncomeShow = !this.sumIncomeShow;
          this.incomeTitle = [
            {
              text: '月收入',
              triggerEvent: true,
              textStyle: {
                color: "#fff",
                fontSize: 16,
              }
            },
            {
              show: this.sumIncomeShow,
              right: '10',
              text: '总收入：238,025,198.50',
              textStyle: {
                color: "#fff",
                fontSize: 16,
              }
            }
          ];
          myChart.dispose();
          this.daysIncome();
        }
      });
      option && myChart.setOption(option);

    },
    //同康月收入
    tkMIncome(TKxData, TKData) {
      var chartDom = document.getElementById("tk-income");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "10%",
          left: "2%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              color: "#fff",
            },
            data: TKxData,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "#fff",
            },
          },
        ],
        series: [
          {
            name: "月收入",
            type: "line",
            "smooth": true,
            data: TKData,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    //医疗科室人数
    departments() {
      var chartDom = document.getElementById("departments");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "医疗项各科室人数及占比",
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
        },
        tooltip: {
          // formatter: function (data) {
          //     return `${data.name} ${data.value}
          //             (${data.percent.toFixed(2)}%)`
          // }
          formatter: "{b} : {c} ({d}%)",
        },
        series: [
          {
            type: "pie",
            radius: "60%",
            label: {
              color: "#fff",
              overflow: "break",
              // formatter: function (data) {
              //     return `${data.name} ${data.value}
              //     (${data.percent.toFixed(2)}%)`
              // }
              formatter: "{b} : {c} ({d}%)",
            },
            labelLine: { show: true },
            data: KSJSON.list,
          },
        ],
      };
      option && myChart.setOption(option);
    },
    //按月统计付费人次
    MPayNum() {
      var chartDom = document.getElementById("pay");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "付费人次",
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              color: "#fff",
            },
            data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"],
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "#fff",
            },
          },
        ],
        series: [
          {
            name: "付费人次",
            data: this.ffrcData,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    goBack() {
      this.$router.go(-1);
    },
    //比较函数
    compare(a, b) {
      let val1 = a.replace('.', '-');
      let val2 = b.replace('.', '-');
      if (new Date(val1).getTime() < new Date(val2).getTime()) { return -1; }
      else if (new Date(val1).getTime() > new Date(val2).getTime()) { return 1; }
      else { return 0 }
    }
  },
  components: { countTo },
  created() {
    this.companyName = orgJson.list[0].name;

    this.orgxData = orgJson.list.map(e => {
      return e.name;
    });

    this.ffrcData = FFRCJSON.list.map(e => {
      return e.sum;
    });

    this.getOrgIncome();
  },
  mounted() {
    setInterval(() => {
      this.currentTime = this.$base.timeSwitch(new Date(), true);
    }, 1000);

    this.$nextTick(() => {
      this.daysIncome();
      //this.departments();
      this.MPayNum();

    });

    window.onresize = () => { };
  },
};
</script>
    

<style lang="scss" scoped>
.el-container {
  height: 100vh;
  overflow: hidden;
  background-color: #18142c;
}

.el-header {
  min-height: 8vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #29243d;

  .go-back {
    color: #fff;
    border: none;
    background-color: #29243d;
  }

  h3 {
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 2px;
  }

  .screen-title {
    color: #ffffff;
    margin-right: 12px;

    p {
      font-size: 14px;
      font-family: ArialMT;
      letter-spacing: 1px;
    }
  }
}

.el-main {
  position: relative;
  z-index: 999;
  min-height: 90vh;
  overflow: hidden;

  .box-card {
    color: #fff;
    border-radius: 8px;
    background: #29243d;
    margin-right: 12px;
    padding: 12px;
    box-sizing: border-box;

    #days-chart {
      min-height: 50vh;
    }

    #departments {}

    #pay {}

    #tk-income {
      min-height: 28vh;
    }

    #current-m-income {}

    h2 {
      font-size: 16px;
      font-weight: bold;
      font-family: "Microsoft YaHei";
    }

    ul {
      padding: 12px;
      box-sizing: border-box;
      height: 30vh;
      overflow-y: scroll;
      box-sizing: border-box;
    }

    li {
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .company-name {
        flex: 1;
        color: #eee;
        margin-right: 12px;
      }

      .company-income {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }

  .box-card>div {
    min-height: 32vh;
  }

  .bottom {
    margin-bottom: 12px;
  }

  .menu-box {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
  }

  .menu-list {
    flex: 1;
    box-sizing: border-box;
    cursor: pointer;
    padding: 17px;
    display: flex;
    flex-direction: column;
    background: #29243d;
    border-radius: 17px;

    .menu-logo {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      box-sizing: border-box;

      img {
        width: 30px;
      }
    }

    .title {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;

      h3 {
        height: 30px;
        font-size: 14px;
        font-weight: 500;
        color: #eee;
        line-height: 30px;
      }
    }

    .go {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      .go-right {
        height: 12px;
        width: 12px;
        padding: 8px;
        background-color: #313131;
        border-radius: 50%;
      }
    }
  }

  .menu-list:nth-child(1),
  .menu-list:nth-child(2) {
    margin-right: 12px;
  }
}

.title {
  font-weight: bold;
}

.box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>